<template>
	<!-- #ifdef APP-NVUE -->
	<cell class="load-more">
		<!-- #endif -->
		<view class="more">
			<view class="bottom" v-if="!isLoadMore"></view>
			<uni-load-more :status="status" :iconSize="12" v-else="isLoadMore" :contentText="contentText" @clickLoadMore="clickLoadMore"></uni-load-more>
		</view>
	<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
</template>

<script>
export default {
	name: 'xbdLoadingMore',
	props: {
		statusNum: {
			type: Number,
			default: 0
		},
		isLoadMore: Boolean
	},
	data() {
		return {
			contentText: {
				contentdown: '点击加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '已显示全部'
			}
		};
	},
	computed: {
		status() {
			// return this.statusNum ? 'noData' : 'loading'
			if (this.statusNum === 0) {
				return 'noMore';
			} else if (this.statusNum === 1) {
				return 'loading';
			} else if (this.statusNum === 2) {
				return 'more'
			}
		}
	},
	methods: {
		clickLoadMore(e) {
			if (e.detail.status === 'more') {
				this.$emit('more')
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.more {
		margin-bottom: 20px;
	}
	::v-deep .uni-load-more__text {
		font-size: 12px;
	}
	.load-more {
		height: 30px;
		text-align: center;
		
		font-size: 12px;
		color: #999;
	}
	.bottom {
		height: 20px;
	}
</style>
